window.onload = function () {
  // 1. 定义数据
  // 2. 渲染数据的函数
  // 3. 绑定事件函数
  // 3.1  删除按钮事件
  // 3.2 数量增减事件
  // 3.3 单选事件
  // 3.4 全选事件
  // 列表数据
  let cartList = [
    ]


  // 2. 渲染数据的函数

  function render() {
    let checkArr = []

    let htmlStr = cartList.map((item, idx) => {
      const { name, pic, price, number, ischecked, id } = item
      if (ischecked) checkArr.push(item)
      return `
      <tr  align="center">
           <td>
             <input class="check" data-id="${id}" ${ischecked ? 'checked' : ''} type="checkbox">
        </td> services.msc
           <td>${idx + 1}</td>
          <td>${name}</td>
           <td class="img">
             <img src="${pic}" style="width:70px;height:70px;" alt="">
           </td>
           <td class="price">${price.toFixed(2)}</td>
           <td class="num">
             <span class="reduce" data-id="${id}" >-</span>
             <input value="${number}" type="text">
             <span class="add" data-id="${id}">+</span>
           </td>
           <td class="account">${(price * number).toFixed(2)}</td>
           <td>
             <button class="del"  data-id="${id}">删除</button>
           </td>
         </tr>
      `
    }).join('')


    if (htmlStr === '') {
      htmlStr = '<tr><td colspan="8" align="center">暂无商品信息</td></tr></td>'
    }
    // 渲染列表
    let tbody = document.querySelector('tbody')
    tbody.innerHTML = htmlStr
    // 渲染全选
    let allCheckInput = document.querySelector('thead th input')
    allCheckInput.checked = checkArr.length === cartList.length && cartList.length
    let totalAccount = checkArr.reduce((prev, item) => (item.number * item.price) + prev, 0) // 总价
    let totalNum = checkArr.reduce((prev, item) => item.number + prev, 0)  // 总数

    // 渲染总价和总数
    let totalNumDOM = document.querySelector('.totalNum i')
    let totalPriceDOM = document.querySelector('.totalPrice i')
    totalNumDOM.innerHTML = totalNum
    totalPriceDOM.innerHTML = totalAccount.toFixed(2)

  }

  render()

  // 绑定事件
  bindEventHandler()

  // 3. 绑定事件函数
  function bindEventHandler() {
    let tbody = document.querySelector('tbody')
    // 3.1  删除按钮事件
    tbody.addEventListener('click',function(e){
      const {classList,dataset,tagName} = e.target
      if(tagName === 'BUTTON' && classList.contains('del')){
        const index = cartList.findIndex(item=> item.id === +dataset.id)
        cartList.splice(index,1)
        render()
      }

      if (tagName === 'SPAN' && classList.contains('add')) {
        console.log(11);
        const index = cartList.findIndex(item => item.id === +dataset.id)
        const input = e.target.previousElementSibling
        cartList[index].number = Number(input.value) + 1
        render()
      }

      if (tagName === 'SPAN' && classList.contains('reduce')) {
        const index = cartList.findIndex(item => item.id === +dataset.id)
        const input = e.target.nextElementSibling
        if (Number(input.value) - 1 === 0) return alert('最少要有一个商品')
        
        cartList[index].number = Number(input.value)- 1
        render()
      }


      if (tagName === 'INPUT' && classList.contains('check')) {
        const index = cartList.findIndex(item => item.id === +dataset.id)
        cartList[index].ischecked = e.target.checked
        render()
      }

    })
    // 3.2 数量增减事件
    // 3.3 单选事件
    // 3.4 全选事件
    let allCheckInput = document.querySelector('thead th input')
    allCheckInput.addEventListener('click',()=>{
      cartList.map(item=>{
        item.ischecked = allCheckInput.checked
      })
      render()
    })

  }

}